<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :md="6" :sm="8">

      </el-col>
      <el-col :md="24" :sm="16">
        <el-card shadow="never" body-style="padding-top: 5px;">
          <el-tabs v-model="active" class="user-info-tabs">
            <el-tab-pane label="平台配置" name="info">
              <el-form
                ref="infoForm"
                :rules="rules"
                label-width="90px"
                style="max-width: 750px;padding-top: 40px;"
                @keyup.enter.native="save"
                @submit.native.prevent>
                <div v-for="(item, index) in form" :key="index">
                  
                <el-form-item :label="item.name" v-if="item.type == 'image'">
                  <uploadImage :limit="1" v-model="item.value"></uploadImage>
                </el-form-item>
                <el-form-item :label="item.name" v-else-if="item.type == 'textarea'">
                  <el-input
                    v-model="item.value"
                    placeholder="请输入"
                    :rows="6"
                    type="textarea"/>
                </el-form-item>
                <el-form-item :label="item.name" :prop="item.field" v-else>
                  <el-input
                    v-model="item.value"
                    placeholder="请输入"
                    clearable/>
                </el-form-item>
                
                <el-form-item label="平台账号:" prop="username" v-if="index == 0">
                  <el-input
                    v-model="userInfo.username"
                    placeholder="请输入平台账号"
                    clearable/>
                </el-form-item>
                <el-form-item label="平台密码:" prop="password" v-if="index == 0">
                  <el-input
                    show-password
                    v-model="userInfo.password"
                    placeholder="请输入8-32位数字、英文密码"
                    clearable/>
                </el-form-item>
                </div>
               
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="save"
                    :loading="loading">保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import uploadImage from '@/components/uploadImage'

export default {
  name: 'system_config',
  components: {uploadImage},
  data() {
    return {
      // 表格数据接口
      showUrl: '/system_config/show',
      // tab页选中
      active: 'info',
      // 表单数据
      form: {},
      // 表单验证规则
      rules: {
      },
      // 保存按钮loading
      loading: false,
      // 是否显示裁剪弹窗
      showCropper: false,
      userInfo: {
        username: this.$store.state.user.user.username,
        password: ''
      }
      
    };
  },
  mounted() {
    // 获取信息
    this.getSystemConfig();
  },
  methods: {
    /* 获取当前用户信息 */
    getSystemConfig() {
      this.$http.get(this.showUrl).then((res) => {
          const result = res.data;
          if (result.code === 0) {
            // 赋予对象值
            this.form = JSON.parse(JSON.stringify(result.data))
          } else {
            this.$message.error(result.msg);
          }
        }).catch((e) => {
          console.error(e);
          this.$message.error(e.message);
        });
    },
    /* 保存更改 */
    save() {
      this.loading = true;
      let data = {
        data: this.form,
        userInfo: this.userInfo
      }
          this.$http.post('/system_config/edit', data).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success('保存成功');
              this.userInfo.password = ''
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
    }
  }
}
</script>

<style scoped>
.ele-body {
  padding-bottom: 0;
}

.el-card {
  margin-bottom: 15px;
}

/* 用户资料卡片 */
.user-info-card {
  padding-top: 8px;
  text-align: center;
}

.user-info-card .user-info-avatar-group {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
}

.user-info-card .user-info-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info-card .user-info-avatar-group > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 30px;
  display: none;
  z-index: 2;
}

.user-info-card .user-info-avatar-group:hover > i {
  display: block;
}

.user-info-card .user-info-avatar-group:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}

.user-info-card .user-info-name {
  font-size: 24px;
  margin-top: 20px;
}

.user-info-card .user-info-desc {
  margin-top: 8px;
}

/* 用户信息列表 */
.user-info-list {
  margin-top: 30px;
}

.user-info-list .user-info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
}

.user-info-item > i {
  margin-right: 10px;
  font-size: 16px;
}

.user-info-item > span {
  flex: 1;
  display: block;
}

/* 用户标签 */
.user-info-tags .el-tag {
  margin: 10px 10px 0 0;
}

/* 用户账号绑定列表 */
.user-account-list {
  margin-top: 10px;
}

.user-account-list .user-account-item {
  padding: 15px;
}

.user-account-list .user-account-item .ele-text-secondary {
  margin-top: 6px;
}

.user-account-list .user-account-item .user-account-icon {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #FFF;
  font-size: 26px;
  border-radius: 50%;
  background-color: #3492ED;
  box-sizing: border-box;
}

.user-account-list .user-account-item .user-account-icon.el-icon-_wechat {
  background-color: #4DAF29;
  font-size: 28px;
}

.user-account-list .user-account-item .user-account-icon.el-icon-_alipay {
  background-color: #1476FE;
  padding-left: 5px;
  font-size: 32px;
}

/* tab页签 */
.user-info-tabs ::v-deep .el-tabs__nav-wrap {
  padding-left: 20px;
}

/deep/ .el-input__inner{
  background: #FAFAFA;
  border: 1px solid #F1F1F1;
}
/deep/ .el-textarea__inner{
  background: #FAFAFA;
  border: 1px solid #F1F1F1;
}
</style>
